<!-- 模块说明 -->
<template>
    <van-nav-bar title="注册" left-text="" left-arrow @click-left="onClickLeft" />

    <div class="big">
        <div class="logo">
            <img src="http://www.shujie.me/themes/classic/assets/images/jiushujie-logo.png" alt="">
        </div>
        <div class="list">
            <van-form @submit="onSubmit">
                <van-cell-group inset>
                    <van-field v-model="ruleForm.phone" name="phone" colon="true" label="手机号" placeholder="手机号"
                        :rules="[{ validator: validatorPhone, message: '请输入正确手机号', trigger: 'onBlur' }]" />

                    <van-field v-model="ruleForm.sms" center clearable label="验证码" placeholder="请输入验证码">
                        <template #button>
                            <van-button size="small" type="primary">发送验证码</van-button>
                        </template>
                    </van-field>

                    <van-field :right-icon="passwordStatus ? 'eye' : 'closed-eye'"
                        :type="!passwordStatus ? 'password' : 'text'"
                        @click-right-icon="passwordStatus = !passwordStatus" v-model="ruleForm.password" name="password"
                        colon="true" label="密&emsp;码" placeholder="请输入密码"
                        :rules="[{ validator: validatorPassword, message: '请输入正确密码', trigger: 'onBlur' }]" />

                    <van-field name="radio" label="性别">
                        <template #input>
                            <van-radio-group v-model="checked" direction="horizontal">
                                <van-radio name="1">男</van-radio>
                                <van-radio name="2">女</van-radio>
                            </van-radio-group>
                        </template>
                    </van-field>

                </van-cell-group>
                <div style="margin: 46px; color: black;">
                    <van-button text="#000" round block type="primary" color="#ccad74" native-type="submit"
                        @submit="onSubmit">
                        注册
                    </van-button>
                </div>
            </van-form>
        </div>
        <div style="font-size: 14px; margin-top: 15px; margin-left: 10px;">
            <van-radio-group v-model="checked1" @click="!checked1">
                <van-radio icon-size="18px" name="1">我已阅读并同意 <span>《服务协议》</span> <span>《隐私保护协议》</span>
                </van-radio>
            </van-radio-group>
        </div>

    </div>

</template>

<script setup>
import { ref, reactive, onMounted } from 'vue';

const passwordStatus = ref(false);
const passwordStatus2 = ref(false);
const onClickLeft = () => history.back();
const ruleForm = reactive({
    phone: '',
    password: '',
    sms: ''
})
const checked = ref('0');
const checked1 = ref(false)


const validatorPhone = (val) => /^1(3\d|4[5-9]|5[0-35-9]|6[567]|7[0-8]|8\d|9[0-35-9])\d{8}$/.test(val)
const validatorPassword = (val) => /^(?![0-9]+$)(?![a-zA-Z]+$)[0-9A-Za-z]{6,16}$/.test(val)

const onSubmit = (values) => {
    console.log(values, 'submit')
};

</script>
<style lang="scss" scoped>

.big {
    display: flex;
    flex-direction: column;
    align-items: center;

}

.login {
   

    button {
        width: 260px;
        height: 40px;
        border-radius: 30px;
        margin: 20px 0;
        background: #fff;
        border: 0.5px solid #d3ab6d;
        color: #fff;
        background: #d3ab6d;
    }
}




.logo {
    img {
        width: 60px;
        // margin: 80px 0 50px 0;
        margin: 30px 0;
        // height:30px;

    }

}
</style>
